<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>尹悦的网页简历</title>
    <link rel="stylesheet" type="text/css"  href="网页简历/style/index/style.css"/>
    <link rel="stylesheet" type="text/css"  href="网页简历/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
</head>
<body>
<div class="container-fluid">
    <!--------------------------------------------------------自我介绍------------------------------------------------------------>
    <div class="row" id="introduce">
        <div class="col-sm-12">
            <div class="top-banner">
                <div class="top-wrapper">
                    <div class="col-sm-3 col-sm-offset-1">
                        <img src="网页简历/images/index/IMG_5752.JPG" class="head">
                    </div>
                    <div class="col-sm-6 col-sm-offset-2">
                        <h1 style="color:white;"><span style="color:red;">H</span>i!I am <span class="yy-text">Yin Yue</span></h1>
                        <p class="introduction">
                            我来自四川成都，热爱生活，性格随和。前端是一门很深的学问，无止境的新奇玩意，很好奇和期待，有较强的自主编程能力，善于快速学习新的前沿技术。爱好读书，喜欢浏览界面酷炫的网页。
                        </p>
                        <div class="row" style="margin-top:40px;">
                            <div class="col-sm-5" style="padding-right:0;">
                                <span class="top-text1" id="topText1">看作品</span>
                                <span class="top-text2" id="topText2">联系我</span>
                            </div>
                            <div class="col-sm-4" style="padding-left:0;">
                                <ul class="top-ul">
                                    <li><img src="网页简历/images/index/QQ.png" class="top-imges"></li>
                                    <li><img src="网页简历/images/index/weixin.png" class="top-imges"></li>
                                    <li><img src="网页简历/images/index/微博.png" class="top-imges"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--------------------------------------------------------我的技能------------------------------------------------------------>
    <div class="row" id="mySkill">
        <div class="col-sm-12">
            <div class="skill-wrapper">
                <div class="col-sm-10 col-sm-offset-1">
                    <h2 class="my-skill">我的技能</h2>
                    <div class="row">
                        <div class="col-sm-3">
                            <span class="circle-text">HTML5</span>
                            <img src="网页简历/images/index/橙色.png" class="circle-image">
                        </div>
                        <div class="col-sm-3">
                            <span class="circle-text">CSS3</span>
                            <img src="网页简历/images/index/蓝色.png" class="circle-image">
                        </div>
                        <div class="col-sm-3">
                            <span class="circle-text">JS</span>
                            <img src="网页简历/images/index/米色.png" class="circle-image">
                        </div>
                        <div class="col-sm-3">
                            <span class="circle-text">JQuery</span>
                            <img src="网页简历/images/index/红.png" class="circle-image">
                        </div>
                    </div>
                    <div class="row" style="margin-top:120px;">
                        <div class="col-sm-3">
                            <span class="circle-text">Bootstrap</span>
                            <img src="网页简历/images/index/红.png" class="circle-image">
                        </div>
                        <div class="col-sm-3">
                            <span class="circle-text">AngularJs</span>
                            <img src="网页简历/images/index/米色.png" class="circle-image">
                        </div>
                        <div class="col-sm-3">
                            <span class="circle-text">JAVA</span>
                            <img src="网页简历/images/index/蓝色.png" class="circle-image">
                        </div>
                        <div class="col-sm-3">
                            <span class="circle-text">PS</span>
                            <img src="网页简历/images/index/橙色.png" class="circle-image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---------------------------------------------我的作品------------------------------------------------------------>
    <div class="row" id="works">
        <div class="col-sm-12">
            <div class="works-wrapper">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <h2 class="wroks-text">我的作品</h2>
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="image-box1">
                                    <a href="觉唯网首页/index.html" target="_self">
                                        <img src="网页简历/images/index/觉唯网.jpg" class="img-size">
                                        <div class="shelter1">
                                            <span class="shelter1-text">觉唯网</span>
                                            <img src="网页简历/images/index/camera.png" class="shelter-img">
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="image-box2">
                                    <a href="慕课网/index.html" target="_self">
                                        <img src="网页简历/images/index/慕课网.jpg" class="img-size">
                                        <div class="shelter2">
                                            <span class="shelter2-text">慕课网</span>
                                            <img src="网页简历/images/index/camera.png" class="shelter-img">
                                        </div>
                                    </a>
                                </div>
                            </div>
                                <div class="col-sm-4">
                                    <div class="image-box3">
                                        <a href="瀑布流/index.html" target="_self">
                                            <img src="网页简历/images/index/瀑布流.jpg" class="img-size">
                                            <div class="shelter3">
                                                <span class="shelter3-text">瀑布流</span>
                                                <img src="网页简历/images/index/camera.png" class="shelter-img">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4" style="margin-top:20px">
                                    <div class="image-box2">
                                        <a href="倒计时/index.html" target="_self">
                                            <img src="网页简历/images/index/GDVOAEB7$984X87}_X(]48Y.png" class="img-size">
                                            <div class="shelter2">
                                                <span class="shelter2-text">倒计时</span>
                                                <img src="网页简历/images/index/camera.png" class="shelter-img">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-sm-4" style="margin-top:20px">
                                    <div class="image-box3">
                                        <a href="田字格/index.html" target="_self">
                                            <img src="网页简历/images/index/QQ截图20170320093310.jpg" class="img-size" >
                                            <div class="shelter3">
                                                <span class="shelter3-text">田字格</span>
                                                <img src="网页简历/images/index/camera.png" class="shelter-img">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-sm-4" style="margin-top:20px">
                                    <div class="image-box1" data-toggle="modal" data-target="#myModal">
                                        <img src="网页简历/images/index/视频.jpg" class="img-size" >
                                        <div class="shelter1">
                                            <span class="shelter1-text">AE视频</span>
                                            <img src="网页简历/images/index/camera.png" class="shelter-img">
                                        </div>
                                    </div>

                                 </div>

                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                        &times;
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel">
                                                      AE视频
                                                    </h4>
                                                </div>
                                                <div class="modal-body">
                                                <video controls style="width:100%;">
                                                        <source src="媒体文件/AE视频.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal -->
                                    </div>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    <!---------------------------------------------联系方式------------------------------------------------------------>
        <div class="row" id="contact">
            <div class="col-sm-12">
                <div class="contact-wrapper">
                    <div class="col-sm-10 col-sm-offset-1">
                        <h2 class="my-contact">联系方式</h2>
                        <div class="col-sm-5">
                            <div class="contact-box1">
                                <h2 class="my-contact">个人信息</h2>
                                <ul>
                                    <li>尹悦</li>
                                    <li>本科</li>
                                    <li>信息管理与信息系统</li>
                                </ul>
                             </div>
                        </div>
                        <div class="col-sm-5 col-sm-offset-2">
                            <div class="contact-box1">
                                <h2 class="my-contact">联系方式</h2>
                                <ul>
                                    <li>QQ：664960698</li>
                                    <li>微信：yinyue87410709</li>
                                    <li>手机：18381306454</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!---------------------------------------------END----------------------------------------------------------->
        <div class="row">
            <div class="col-sm-12">
                <div class="end-wrapper">
                    <h2>End</h2>
                </div>
            </div>
        </div>
    </div>
<!--------------------------------------------------------顶部条------------------------------------------------------------>
<div class="top-info" id="topInfo">
        <span class="yy">尹悦</span>
        <ul class="clear" id="infoUl">
            <li id="tel">联系方式</li>
            <li id="myWork">我的作品</li>
            <li id="skill">我的技能</li>
            <li id="aboutMe" class="active">关于我</li>
        </ul>
</div>
<script src="网页简历/jq/jquery-2.2.4.min.js"></script>
<script src="网页简历/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="网页简历/script/index/js.js"></script>
</body>
</html>